<template>
<view id="containerBoxs" ref="containerBox" class="container">
  <view class="video-container">
    <view :style="{ height: `${query.height}rpx` }" class="video-content">
      <web-view v-if="webViewVisible" :src="url"></web-view>
    </view>
  </view>
  <cover-view class="cover-top" style="height: 128rpx;"></cover-view>
  <cover-view class="cover-bottom" :style="{top: bottomTop, height: '200rpx'}"></cover-view>
</view>
  
</template>

<script setup lang="ts">
import { socket } from "@/api/config/ws";
import Gap from "@/components/gap.vue";
import { onReady } from "@dcloudio/uni-app";
import { computed, onMounted, reactive, ref } from "vue";
const containerBox = ref(null);
const query = reactive({
	width : 0,
	height: 0,
	licenseUrl:"https://license.vod2.myqcloud.com/license/v2/1324429756_1/v_cube.license",
	url:"webrtc://zwwlivepull.440.red/live/81"
});
const top = 64;

const webViewVisible = ref(false);
const calcWidthAndHeight = (width:number) => {
	query.width  = Math.round(width * 0.96 * 0.96);
	const rate   = 270 / 477;
	query.height = Math.round(query.width / rate); 
}


const updateWidthAndHeight = ()=>{

	// #ifdef MP-WEIXIN
	uni.createSelectorQuery().select('#containerBoxs').boundingClientRect((data) => {
      if (data) {
		calcWidthAndHeight(data.width);
      }
    })
    .exec();
	// #endif

	// #ifdef WEB || APP
	if(containerBox.value){
		calcWidthAndHeight(containerBox.value.$el.clientWidth);
	}
	// #endif
}

const bottomTop = computed(() => {
	return `${Math.round(query.height) - top - 20}px`;
});

onReady(() => {
	//socket.init(import.meta.env.VITE_WSS_URL,);
	updateWidthAndHeight();

	setTimeout(() => {
        webViewVisible.value = true;
      }, 1000); // 延迟 1 秒加载 web-view
});


const url = computed(()=>{
	return `https://tests.p.qujiaba.com?width=${query.width}px&height=${query.height}px&licenseUrl=${encodeURIComponent(query.licenseUrl)}&url=${query.url}`;
});

</script>

<style lang="scss" scoped >

/* app.wxss */
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 24rpx;
  margin: 0 auto;
  width: 96%;
}
.video-content {
  position: relative;
  width: 100%;
}
.cover-top,
.cover-bottom {
  position: absolute;
  width: 100%;
  background-color: #94a3b8;
  z-index: 100;
}
</style>
